<template>
	<view class="tomb-binding" >
		<u-select v-model="selectShow" :list="list" @confirm="confirm"></u-select>
		<u-select v-model="regionShow" mode="mutil-column-auto" :list="listAddress" @confirm="confirm"></u-select>
		<u-form :model="submitForm" ref="uForm">
			<u-form-item label="墓位位置:" label-width="160" prop="address">
				<u-input v-model="submitForm.address" type="select" :border="true" placeholder="请选择位置" @click="regionShow = true"/>
			</u-form-item>
			
			<u-form-item label="墓主姓名：" label-width="160" prop="name">
				<u-input v-model="submitForm.name" :border="true" placeholder="请输入墓主姓名"  />
			</u-form-item>
			
			<u-form-item label="报修事项：" label-width="160" prop="matter">
				<u-input v-model="submitForm.matter" type="select" :border="true" placeholder="请选择报修事项" @click="selectShow = true" />
			</u-form-item>
			
			<u-form-item label="补充说明：" label-width="160">
				<u-input v-model="submitForm.intro" type="textarea" :border="true" placeholder="请填写补充说明" />
			</u-form-item>
			
			<u-form-item label="联系人：" label-width="160" prop="people">
				<u-input v-model="submitForm.people" :border="true" placeholder="请输入联系人" />
			</u-form-item>
			
			<u-form-item label="电话：" label-width="160" prop="phone">
				<u-input v-model="submitForm.phone" :border="true" placeholder="请输入电话" />
			</u-form-item>
			</u-form>
		
		<view class="add-btn" >
			<span @click="submit">确认提交</span>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				submitForm:{
					address:'',
					name:'',
					matter:'',
					matterId:'',
					intro:'',
					people:'',
					phone:''
				},
				regionShow:false,
				listAddress: [{
					label: '青竹镇',
					value: '1',
					children: [{
						label: 'A区',
						value: '11',
						children: [{
							label: '1排',
							value: '111',
							children: [{
								label: '20号',
								value: '1111',
							}]
						}]
					}]
				}],
				rules:{
					name:[{
						type:"string",
						require:true,
						message:'请输入墓主姓名'
					}],
					address:[{
						require:true,
						message:'请选择墓位位置'
					}],
					matter:[{
						require:true,
						message:'请选择保修事项'
					}],
					relation:[{
						type:"string",
						message:'请正确填写与本人的关系'
					}],
					people:[{
						type:"string",
						require:true,
						message:'请输入联系人'
					}],
					phone:[{
						required: true, 
						message: '请输入手机号',
						trigger: ['change','blur'],
					},{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
				},
				selectShow:false,
				list:[{
					label:'修补墓碑',
					value:"1"
				},{
					label:'更换墓碑',
					value:"2"
				},{
					label:'整墓改建',
					value:"3"
				}]
			};
		},
		methods:{
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			confirm(e){
				console.log(e)
				this.submitForm.matter = e[0].label
				this.submitForm.matterId = e[0].value
			}
		}
	}
</script>

<style lang="less">
.tomb-binding{
	font-size: 28upx;
	padding: 0 40upx;
	
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 40upx;
		margin-top:90upx;
		margin-bottom: 30upx;
		span{
			font-size: 28upx;
			color: #ffffff;
			background: #f5942b;
			padding: 18upx 66upx;
			border-radius: 6upx;
		}
	}
}
</style>
